<template>
  <div class="ChatSquare" ref="main">
    <div class="content" id="chatContainer">
      <div class="mesg" v-for="(item, index) in msg" :key="index">
        <!-- 他人消息 -->
        <div class="other" v-if="item.offset == 'left'">
          <img class="head" :src="item.avatar" alt="" />
          <div class="msg" @click="clickMsg(item)">
            <div class="nickname">{{ item.nickname }}</div>
            <div class="msgBox">
              <!-- 普通消息 -->
              <div class="card" v-if="item.dataType == 1">
                {{ item.wanna.content }}
              </div>
              <!-- 卡片消息 -->
              <div class="card1" v-else-if="item.dataType == 2">
                <div class="imgBox">
                  <img :src="item.userShareCard.avatar" alt="" />
                  <div class="imgTagBox">
                    <div
                      class="imgTag"
                      v-for="(item2, index2) in item.userShareCard.mood"
                      :key="index2"
                    >
                      <img :src="item2.icon" alt="" />
                      {{ item.userShareCard.wanna[index2].title }}
                    </div>
                    <!-- <div class="imgTag">测试</div>
                    <div class="imgTag">测试</div>
                    <div class="imgTag">测试</div> -->
                  </div>
                </div>
                <div class="tag">
                  <div
                    class="tag-item"
                    v-for="(item1, index1) in item.userShareCard.label"
                    :key="index1"
                    style="background: #ede2ff"
                  >
                    {{ item1.labelName }}
                  </div>
                  <!-- <div class="tag-item" style="background: #ffcce9">
                    王者荣耀
                  </div>
                  <div class="tag-item" style="background: #ccf3ff">
                    英雄联盟
                  </div>
                  <div class="tag-item" style="background: #ede2ff">
                    落地成盒
                  </div> -->
                </div>
              </div>
              <div class="like">
                <i class="iconfont" @click="like(item)">&#xe721;</i
                >{{ item.praise }}
              </div>
            </div>
          </div>
        </div>
        <!-- 自己消息 -->
        <div class="mine" v-if="item.offset == 'right'">
          <img class="head" :src="item.avatar" alt="" />
          <div class="msg">
            <div class="nickname">{{ item.nickname }}</div>
            <div class="msgBox">
              <!-- 普通消息 -->
              <div v-if="item.dataType == 1" class="card">
                {{ item.wanna.content }}
              </div>
              <!-- 卡片消息 -->
              <div class="card1" v-else-if="item.dataType == 2">
                <div class="imgBox">
                  <img :src="item.userShareCard.avatar" alt="" />
                  <div class="imgTagBox">
                    <div
                      class="imgTag"
                      v-for="(item2, index2) in item.userShareCard.mood"
                      :key="index2"
                    >
                      <img :src="item2.icon" alt="" />
                      {{ item.userShareCard.wanna[index2].title }}
                    </div>
                    <!-- <div class="imgTag">测试</div>
                    <div class="imgTag">测试</div>
                    <div class="imgTag">测试</div> -->
                  </div>
                </div>
                <div class="tag">
                  <div
                    class="tag-item"
                    v-for="(item1, index1) in item.userShareCard.label"
                    :key="index1"
                    style="background: #ede2ff"
                  >
                    {{ item1.labelName }}
                  </div>
                  <!-- <div class="tag-item" style="background: #ffcce9">
                    王者荣耀
                  </div>
                  <div class="tag-item" style="background: #ccf3ff">
                    英雄联盟
                  </div>
                  <div class="tag-item" style="background: #ede2ff">
                    落地成盒
                  </div> -->
                </div>
              </div>
              <div class="like" @click="likeMine(item)">
                <i class="iconfont">&#xe721;</i>{{ item.praise }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--  -->
    <div class="foot">
      <div class="want"><img src="../assets/image/msg.png" alt="" />你想要</div>
      <div
        class="item"
        v-for="item in want"
        :key="item.id"
        :style="{ color: item.color, 'border-color': item.color }"
        @click="sendWant(item)"
      >
        {{ item.title }}
        <div class="back" :style="{ 'background-color': item.color }"></div>
      </div>
    </div>
    <VantDialog
      v-model="show"
      :show-confirm-button="false"
      :close-on-click-overlay="true"
    >
      <div v-if="bol">
        <div class="dtitle">
          <span>{{ tagetObj.userShareCard.appraisal }}</span>
        </div>
        <div class="dimgBox">
          <img :src="tagetObj.userShareCard.avatar" alt="" />
          <div class="wantBox">
            <div
              class="wantTag"
              v-for="(item, index) in tagetObj.userShareCard.mood"
              :key="index"
            >
              <img :src="item.icon" alt="" />
              {{ tagetObj.userShareCard.wanna[index].title }}
            </div>
          </div>
          <div class="info">
            <div class="name">{{ tagetObj.userShareCard.nickname }}</div>
            <div class="age">{{ tagetObj.userShareCard.age }}</div>
            <!-- <div class="sex">{{ tagetObj.userShareCard.sex }}</div> -->
          </div>
        </div>
        <div class="dtag">
          <div
            class="item"
            v-for="(item, index) in tagetObj.userShareCard.label"
            :key="index"
          >
            {{ item.labelName }}
          </div>
        </div>
        <div class="dbtn">
          <button class="btn1" id="ulink">
            <img src="../assets/image/sdhh.png" alt="" />
            <span>闪电会话</span>
          </button>
        </div>
      </div>
    </VantDialog>
  </div>
</template>

<script>
import { squareList, squareWannaList, squarePraise } from "../api/reply";
import { Dialog } from "vant";
export default {
  components: {
    VantDialog: Dialog.Component,
  },
  data() {
    return {
      isOut: true, //是否外部打开
      userId: 0, //用户id
      avatar: "https://img.psychexy.com/img/1633770610.jpg", //用户头像游客
      nikeName: "游客", //用户头像
      show: false,
      microtimeId: 0, //最后一条消息id
      want: [], //想做列表
      msg: [], //消息列表
      tagetObj: {},
      bol: false,
    };
  },
  methods: {
    //获取列表
    async getList() {
      const res = await squareList({
        microtimeId: 0,
        userId: this.userId,
      });
      if (res.code == 0) {
        this.msg = res.data;
        if (res.data.length != 0) {
          this.microtimeId = res.data[res.data.length - 1].microtimeId;
        }
      }
    },
    //刷新列表
    async refreshList() {
      const res = await squareList({
        microtimeId: this.microtimeId,
        userId: this.userId,
      });
      if (res.code == 0 || res.data.length != 0) {
        this.msg.push(res.data);
      }
    },
    async getWant() {
      const res = await squareWannaList();
      if (res.code == 0) {
        this.want = res.data;
      }
    },
    //点击发送想法
    sendWant(obj) {
      this.msg.push({
        microtimeId: "0",
        nickname: this.nikeName,
        avatar: this.avatar,
        offset: "right",
        praise: 0,
        dataType: 1,
        wanna: {
          content: obj.title,
        },
      });
      //在内部发消息
      // if (!isOut) {
      // }
      this.onScrollBottom();
    },
    //滚动到底部
    // 滚动到底部
    onScrollBottom() {
      this.$nextTick(() => {
        const container = this.$el.querySelector("#chatContainer");
        if (container)
          document.documentElement.scrollTop = container.scrollHeight;
      });
    },
    //点击他人消息
    clickMsg(obj) {
      if (obj.dataType == 2) {
        this.tagetObj = obj;
        this.bol = true;
        this.show = true;
      }
    },
    //点赞
    async like(obj) {
      // this.refreshList();
      obj.praise++;
      console.log("点赞");
      const res = await squarePraise({
        extId: obj.extId,
      });
      if (res.code == 0) {
        return;
      }
      // squarePraise
    },
    //点赞自己
    likeMine(obj) {
      obj.praise++;
    },
  },
  created() {
    this.getList();
    this.getWant();
  },
  mounted() {
    this.onScrollBottom();
    //友盟Ulink
    window.ULink([
      {
        id: "usr1bm6lefckiamn",
        // data: {
        //   // um_chnnl: this.um_chnnl,
        //   umeng_channel: this.um_chnnl,
        // },
        selector: "#ulink",
        // auto: true,
        timeout: 2000,
        lazy: false,
        useOpenInBrowerTips: function (ctx) {
          //提示浏览器打开 带遮罩层demo
          return `<div style="position:fixed;left:0;top:0;background:rgba(255,0,255,0.5);width:100%;height:100%;z-index:19910324;"></div>`;
        },
        proxyOpenDownload: function (defaultAction, LinkInstance) {
          console.log(defaultAction);
          if (LinkInstance.solution.type === "scheme") {
            // qq或者微信环境特殊处理下
            if (ULink.isWechat || ULink.isQQ) {
              // 在qq或者微信环境执行内置逻辑，具体内置逻辑为:当设置了useOpenInBrowerTips字段时，qq&&微信&&scheme时，启用蒙层提示去浏览器打开
              defaultAction();
            } else {
              window.location.href = LinkInstance.solution.downloadUrl;
            }
          } else if (LinkInstance.solution.type === "universalLink") {
          }
        },
      },
    ]);
  },
  // updated: function () {
  //   this.$nextTick(function () {
  //     setTimeout(() => {
  //       var div = document.getElementById("chatContainer");
  //       div.scrollTop = div.scrollHeight;
  //     }, 13);
  //   });
  // },
  // watch: {
  //   msg: {
  //     deep: true, //深度监听
  //     handler: function () {
  //       console.log(11);
  //       this.$nextTick(() => {
  //         var container = this.$el.querySelector("#chatContainer");
  //         console.log(container.scrollHeight);
  //         container.scrollTop = container.scrollHeight;
  //       });
  //     },
  //   },
  // },
};
</script>

<style lang="less" scoped>
.ChatSquare {
  padding: 16px;
  height: 100%;
  box-sizing: border-box;
  position: relative;
  background-color: #ffffff;
  .content {
    padding-bottom: 150px;
  }
  .mesg {
    .other {
      display: flex;
      margin-bottom: 20px;
      .head {
        width: 44px;
        height: 44px;
        margin-right: 10px;
        margin-top: 8px;
        border-radius: 50%;
      }
      .msg {
        .nickname {
          font-size: 14px;
          font-family: PingFang SC;
          font-weight: bold;
          line-height: 20px;
          color: #333333;
          margin-bottom: 7px;
        }
        .msgBox {
          display: flex;
          align-items: center;
          .card {
            padding: 10px 20px;
            font-size: 17px;
            font-family: PingFang SC;
            font-weight: bold;
            line-height: 24px;
            color: #333333;
            background: #f5f5f5;
            border-radius: 2px 22px 22px 22px;
            word-wrap: break-word;
          }
          .card1 {
            width: 220px;
            border-radius: 7px 7px 22px 22px;
            overflow: hidden;
            .imgBox {
              width: 100%;
              height: 140px;
              position: relative;
              img {
                width: 100%;
                height: 100%;
              }
              .imgTagBox {
                position: absolute;
                top: 0px;
                left: 0px;
                padding: 7px;
                display: flex;
                flex-wrap: wrap;
              }
              .imgTag {
                padding: 3px 10px;
                background-color: #ff4d52;
                margin-right: 5px;
                margin-bottom: 5px;
                color: #ffffff;
                font-size: 13px;
                font-family: PingFang SC;
                border-radius: 5px;
                display: flex;
                align-items: center;
                img {
                  width: 16px;
                  height: 16px;
                  margin-right: 5px;
                }
              }
            }
            .tag {
              padding: 10px;
              background: #f5f5f5;
              display: flex;
              flex-wrap: wrap;
              .tag-item {
                padding: 3px 15px;
                font-size: 13px;
                font-family: PingFang SC;
                font-weight: bold;
                color: #333333;
                border-radius: 5px;
                margin-right: 5px;
                margin-bottom: 5px;
              }
            }
          }
          .like {
            // width: 53px;
            // height: 23px;
            background: #f5f5f5;
            opacity: 1;
            border-radius: 12px;
            font-size: 12px;
            font-family: PingFang SC;
            font-weight: bold;
            line-height: 23px;
            color: #666666;
            padding: 0 10px;
            margin-left: 10px;
            display: flex;
            align-items: center;
            .iconfont {
              color: #ff3f70;
              font-size: 20px;
            }
          }
        }
      }
    }
    .mine {
      display: flex;
      flex-direction: row-reverse;
      margin-bottom: 20px;
      .head {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        margin-left: 10px;
        margin-top: 8px;
      }
      .msg {
        .nickname {
          font-size: 14px;
          font-family: PingFang SC;
          font-weight: bold;
          line-height: 20px;
          color: #333333;
          margin-bottom: 7px;
          text-align: right;
        }
        .msgBox {
          display: flex;
          align-items: center;
          flex-direction: row-reverse;
          .card {
            padding: 10px 20px;
            font-size: 17px;
            font-family: PingFang SC;
            font-weight: bold;
            line-height: 24px;
            color: #ffffff;
            background: #333333;
            border-radius: 22px 2px 22px 22px;
            word-wrap: break-word;
          }
          .card1 {
            width: 220px;
            border-radius: 7px 7px 22px 22px;
            overflow: hidden;
            .imgBox {
              width: 100%;
              height: 140px;
              position: relative;
              img {
                width: 100%;
                height: 100%;
              }
              .imgTagBox {
                position: absolute;
                top: 0px;
                left: 0px;
                padding: 7px;
                display: flex;
                flex-wrap: wrap;
              }
              .imgTag {
                padding: 3px 10px;
                background-color: #ff4d52;
                margin-right: 5px;
                margin-bottom: 5px;
                color: #ffffff;
                font-size: 13px;
                font-family: PingFang SC;
                border-radius: 5px;
                display: flex;
                align-items: center;
                img {
                  width: 16px;
                  height: 16px;
                  margin-right: 5px;
                }
              }
            }
            .tag {
              padding: 10px;
              background: #333335;
              display: flex;
              flex-wrap: wrap;
              .tag-item {
                padding: 3px 15px;
                font-size: 13px;
                font-family: PingFang SC;
                font-weight: bold;
                color: #333333;
                border-radius: 5px;
                margin-right: 5px;
                margin-bottom: 5px;
              }
            }
          }
          .like {
            // width: 53px;
            // height: 23px;
            background: #f5f5f5;
            opacity: 1;
            border-radius: 12px;
            font-size: 12px;
            font-family: PingFang SC;
            font-weight: bold;
            line-height: 23px;
            color: #666666;
            padding: 0 10px;
            margin-right: 10px;
            display: flex;
            align-items: center;
            .iconfont {
              color: #ff3f70;
              font-size: 20px;
            }
          }
        }
      }
    }
  }
  .foot {
    position: fixed;
    bottom: 0px;
    display: flex;
    flex-wrap: wrap;
    height: 120px;
    overflow: auto;
    background-color: #ffffff;
    .want {
      font-size: 18px;
      font-family: Source Han Sans SC;
      font-weight: bold;
      color: #333333;
      border: 2px solid #cccccc;
      border-radius: 24px;
      padding: 10px 15px;
      display: flex;
      align-items: center;
      margin-bottom: 10px;
      margin-right: 10px;
      img {
        width: 18px;
        height: 18px;
        margin-right: 6px;
      }
    }
    .item {
      font-size: 18px;
      font-family: Source Han Sans SC;
      font-weight: bold;
      color: #ffbb15;
      border: 2px solid #ffbb15;
      // opacity: 0.5;
      border-radius: 24px;
      padding: 10px 15px;
      margin-bottom: 10px;
      margin-right: 10px;
      position: relative;
      overflow: hidden;
      .back {
        position: absolute;
        top: 0;
        left: 0;
        z-index: -10;
        width: 100%;
        height: 100%;
        opacity: 0.2;
      }
    }
  }
  .dtitle {
    height: 73px;
    text-align: center;
    background-image: linear-gradient(to right, #faf7ca, #c1fffa);
    padding-top: 30px;
    box-sizing: border-box;
    span {
      margin-top: 50px;
      font-size: 25px;
      font-family: TsangerYuYangT;
      font-weight: 700;
      line-height: 32px;
      color: #333333;
    }
  }
  .dimgBox {
    box-sizing: border-box;
    height: 280px;
    padding: 10px 25px;
    position: relative;
    img {
      width: 100%;
      height: 100%;
    }
    .wantBox {
      position: absolute;
      top: 0;
      left: 0;
      padding: 17px 0 0 32px;
      display: flex;
      flex-wrap: wrap;
      .wantTag {
        padding: 3px 10px;
        background-color: #ff4d52;
        margin-right: 5px;
        margin-bottom: 5px;
        color: #ffffff;
        font-size: 13px;
        font-family: PingFang SC;
        border-radius: 5px;
        display: flex;
        align-items: center;
        img {
          width: 16px;
          height: 16px;
          margin-right: 5px;
        }
      }
    }
    .info {
      position: absolute;
      bottom: 10px;
      left: 37px;
      display: flex;
      align-items: center;
      font-size: 20px;
      font-weight: 700;
      color: #fff;
      .age {
        margin: 0 10px;
      }
    }
  }
  .dtag {
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box;
    padding: 0 25px;
    .item {
      font-size: 12px;
      font-family: PingFang SC;
      font-weight: 800;
      color: #333333;
      padding: 3px 10px;
      background-color: #ffeae2;
      margin-right: 5px;
      border-radius: 5px;
      margin-bottom: 5px;
    }
  }
  .dbtn {
    display: flex;
    justify-content: center;
    padding: 20px 0;
    .btn1 {
      width: 200px;
      height: 50px;
      border-radius: 25px;
      background-color: #333333;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #f3d830;
      img {
        width: 20px;
        height: 20px;
        margin-right: 10px;
      }
    }
  }
}
</style>